<template>
	<a-modal :width="500" :visible="visible" title="新建文件夹" @ok="handleOk" @cancel="handleClose" centered>
		<a-form :model="floderForm" ref="formRef" :rules="rules" layout="vertical">
			<a-form-item label="名称" name="name">
				<a-input placeholder="请输入" v-model:value="floderForm.name" />
			</a-form-item>
			<a-form-item label="类型" name="type">
				<a-select v-model:value="floderForm.type" placeholder="请选择" style="width: 100%;"
					:options="selectOptions"></a-select>
			</a-form-item>
			<a-form-item label="文件夹项目可见" name="visible">
				<a-radio-group v-model:value="floderForm.visible">
					<a-radio :value="1">可见</a-radio>
					<a-radio :value="2">不可见</a-radio>
				</a-radio-group>
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		watch,
		toRaw,
		createVNode,
		ref,
		nextTick,
	} from "vue";
	import {
		FolderAddOutlined
	} from "@ant-design/icons-vue";

	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},

		components: {
		},

		setup(props, context) {
			const state = reactive({
				floderForm: {
					name: null,
					type: null,
					visible: 1
				},
				selectOptions: [{
					value: 1,
					label: '视频'
				}, {
					value: 2,
					label: '音频'
				}, {
					value: 3,
					label: '文案'
				}, {
					value: 4,
					label: '图片'
				}],
				rules: {
					name: [{
						required: true,
						message: '请输入!',
					}],
					type: [{
						required: true,
						message: '请选择!',
					}],
					visible: [{
						required: true,
						message: '请选择!',
					}],
				}
			});

			const handleOk = () => {
				context.emit('close')
			}

			const handleClose = () => {
				context.emit('close')
			}

			watch(() => props.visible, val => {
			})

			return {
				...toRefs(state),
				handleOk,
				handleClose
			}
		},
	});
</script>

<style lang="less" scoped>
</style>